<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园社团与兴趣圈层平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="bi bi-people-fill"></i> 校园社团平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="clubs.html">社团广场</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="activities.html">活动中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="topics.html">话题广场</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="circles.html">兴趣圈子</a>
                    </li>
                    <li class="nav-item" id="loginNav">
                        <a class="nav-link" href="login.html">登录</a>
                    </li>
                    <li class="nav-item d-none" id="userNav">
                        <div class="dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                                <i class="bi bi-person-circle"></i> <span id="username"></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="profile.html">个人中心</a></li>
                                <li><a class="dropdown-item" href="my-clubs.html">我的社团</a></li>
                                <li><a class="dropdown-item" href="my-activities.html">我的活动</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" id="logoutBtn">退出登录</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="hero-section text-white text-center py-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
        <div class="container">
            <h1 class="display-4 fw-bold mb-3">欢迎来到校园社团平台</h1>
            <p class="lead mb-4">发现你的兴趣，加入志同道合的社团，参与精彩活动</p>
            <div class="d-flex justify-content-center gap-3">
                <a href="clubs.html" class="btn btn-light btn-lg">
                    <i class="bi bi-search"></i> 浏览社团
                </a>
                <a href="register.html" class="btn btn-outline-light btn-lg">
                    <i class="bi bi-person-plus"></i> 立即注册
                </a>
            </div>
        </div>
    </div>

    <div class="container my-5">
        <div class="row g-4">
            <div class="col-md-3 col-sm-6">
                <div class="card text-center border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="feature-icon bg-primary bg-gradient text-white rounded-circle mb-3 mx-auto" style="width: 60px; height: 60px; line-height: 60px;">
                            <i class="bi bi-people fs-3"></i>
                        </div>
                        <h5 class="card-title">社团管理</h5>
                        <p class="card-text text-muted">创建社团、招募成员、组织活动</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card text-center border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="feature-icon bg-success bg-gradient text-white rounded-circle mb-3 mx-auto" style="width: 60px; height: 60px; line-height: 60px;">
                            <i class="bi bi-calendar-event fs-3"></i>
                        </div>
                        <h5 class="card-title">精彩活动</h5>
                        <p class="card-text text-muted">报名参加各类校园活动</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card text-center border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="feature-icon bg-info bg-gradient text-white rounded-circle mb-3 mx-auto" style="width: 60px; height: 60px; line-height: 60px;">
                            <i class="bi bi-chat-dots fs-3"></i>
                        </div>
                        <h5 class="card-title">话题讨论</h5>
                        <p class="card-text text-muted">分享想法、交流心得</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card text-center border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="feature-icon bg-warning bg-gradient text-white rounded-circle mb-3 mx-auto" style="width: 60px; height: 60px; line-height: 60px;">
                            <i class="bi bi-award fs-3"></i>
                        </div>
                        <h5 class="card-title">成长体系</h5>
                        <p class="card-text text-muted">获取积分、收集勋章</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <h3 class="mb-4"><i class="bi bi-fire text-danger"></i> 热门社团</h3>
                <div id="hotClubs" class="row g-3">
                    <div class="col-12 text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <h3 class="mb-4"><i class="bi bi-stars text-warning"></i> 最新活动</h3>
                <div id="latestActivities" class="row g-3">
                    <div class="col-12 text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container text-center">
            <p class="mb-0">&copy; 2024 校园社团与兴趣圈层平台. All rights reserved.</p>
        </div>
    </footer>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

